import './FormTemplate.scss'
import {
    App,
    Form,
    Input,
    Radio,
    Button,
    InputNumber,
    Select,
    TreeSelect,
    DatePicker,
    ColorPicker,
    Slider,
    Collapse
} from 'antd'
import dayjs from 'dayjs'
import { useRequest } from 'alova'
import PropTypes from 'prop-types'
import { useEventEmitter } from 'ahooks'
import { useEffect, useState } from 'react'

import { Http } from '../Api'
import { ModelBox } from '../Model'
import { ICON, iconList } from '../Utils/ICON'
import { dayToString } from '../Utils/Common'
import { ColorSelect } from '../Config/colorList'
import { ThemeBackList } from '../Config/themeList'
import { ModelHomeA01, ModelHomeA02 } from '../Admin/Home/Common'
import { MaterialTyp, EffectList, optionsList } from '../Assets/Params'

const { TextArea } = Input

export const FormAssembly = ({ params, record, addTo, actionRef, Off }) => {
    FormAssembly.propTypes = {
        params: PropTypes.object,
        record: PropTypes.object,
        actionRef: PropTypes.object,
        Off: PropTypes.func,
        addTo: PropTypes.object
    }

    const { notification } = App.useApp()
    const [form] = Form.useForm()
    const { pos, put, columns, initialValues } = params

    const [Columns, setColumns] = useState([])
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        // 数据处理
        setColumns(columns.filter(v => !record ? !v.hideInAdded : !v.hideInModify))
        if (record) {
            let initial = { ...record }
            let Date = columns.filter(v => v.valueType === 'date')
            if (Date.length > 0) Date.forEach(item => initial[item.dataIndex] = dayjs(initial[item.dataIndex]))
            form.setFieldsValue(initial)
        }
        form.setFieldsValue(addTo)
    }, [addTo, columns, form, record])

    const { send: posData } = useRequest(params => Http({ url: pos, params }), { immediate: false })
    const { send: putData } = useRequest(params => Http({ url: put, params, path: [record?.uuid] }), { immediate: false })

    const onSubmit = params => {
        setLoading(true)
        const { uuid } = params
        let Date = Columns.filter(v => v.valueType === 'date')
        if (Date.length > 0) Date.forEach(item => params[item.dataIndex] = dayToString(params[item.dataIndex], item))
        if (uuid) putData(params).then(() => onSuccess(0)).catch(err => onError(err))
        else posData(params).then(() => onSuccess(1)).catch(err => onError(err))
    }

    const onSuccess = e => {
        const text = { 0: '修改成功', 1: '新增成功' }
        actionRef.current.reload()
        notification.success({ key: 'form', message: text[e], description: '如数据未自动刷新,请手动刷新' })
        Off()
    }

    const onError = () => setLoading(false)

    return (
        <Form
            name="basic"
            form={form}
            className='FormAssembly'
            initialValues={initialValues}
            onFinish={onSubmit}
            onFinishFailed={() => console.log('失败函数')}
            autoComplete="off"
            layout="vertical"
        >
            {Columns.map(item => <FormItem key={item.dataIndex} data={item} form={form} />)}
            <div className="FormSub">
                <Form.Item>
                    <Button className="FormSubmit" type="primary" htmlType="submit" loading={loading}>
                        提交
                    </Button>
                </Form.Item>
            </div>
        </Form>
    )
}

const FormItem = ({ data, form }) => {
    FormItem.propTypes = {
        data: PropTypes.object,
        form: PropTypes.object,
    }

    const {
        dataIndex,
        title,
        valueType,
        rules,
        tooltip,
        valueEnum,
        multiple,
        fieldNames,
        enumObject,
        picker,
        showTime,
        pattern,
        valueJudge,
        judgeValue,
        fieldProps
    } = data

    const HiddenForm = () => {
        return (
            <Form.Item className="FormHidden" label={title} name={dataIndex}>
                <Input />
            </Form.Item>
        )
    }

    const InputForm = () => {

        return (
            <Form.Item
                label={title}
                name={dataIndex}
                tooltip={tooltip}
                rules={[{ required: rules, message: `必须填写${title}!` }]}
            >
                <Input
                    style={{ width: '100%' }}
                    placeholder={`请输入${title}`}
                    pattern={pattern}
                />
            </Form.Item>
        )
    }

    const NumberForm = () => {
        return (
            <Form.Item
                label={title}
                name={dataIndex}
                tooltip={tooltip}
                rules={[{ required: rules, message: `必须填写${title}!` }]}
            >
                <InputNumber placeholder={`请输入${title}`} style={{ width: `100%` }} />
            </Form.Item>
        )
    }

    const SelectForm = () => {
        const [options, setOptions] = useState([])
        useEffect(() => {
            if (form && (form.getFieldValue(dataIndex) || form.getFieldValue(dataIndex) === 0) && typeof form.getFieldValue(dataIndex) === 'number')
                form.setFieldsValue({ [dataIndex]: form.getFieldValue(dataIndex).toString() })
            let data
            if (valueEnum instanceof Array) data = valueEnum
            else {
                if (enumObject) data = Object.keys(valueEnum).map(key => ({ label: valueEnum[key].text, value: key, }))
                else data = Object.keys(valueEnum).map(key => ({ label: valueEnum[key], value: key, }))
            }
            const sortData = (x, y) => {
                if (x.label < y.label) return -1
                if (x.label > y.label) return 1
                return 0
            }
            setOptions(data.sort(sortData))
        }, [])
        return (
            <Form.Item
                label={title}
                name={dataIndex}
                tooltip={tooltip}
                rules={[{ required: rules, message: `必须填写${title}!` }]}
            >
                <Select
                    allowClear
                    options={options}
                    showSearch={true}
                    fieldNames={fieldNames}
                    placeholder={`请选择${title}`}
                    mode={multiple ? 'multiple' : ''}
                    filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
                />
            </Form.Item>
        )
    }

    const DateForm = () => {
        return (
            <Form.Item
                label={title}
                name={dataIndex}
                tooltip={tooltip}
                rules={[{ required: rules, message: `必须选择${title}!` }]}
            >
                <DatePicker style={{ width: '100%' }} picker={picker} showTime={showTime} />
            </Form.Item>
        )
    }

    const TextAreaFrom = () => {
        return (
            <Form.Item
                className="FormAll"
                label={title}
                name={dataIndex}
                tooltip={tooltip}
                rules={[{ required: rules, message: `必须填写${title}!` }]}
            >
                <TextArea placeholder={`请输入${title}`} autoSize={{ minRows: 4 }} />
            </Form.Item>
        )
    }

    const TreeSelectForm = () => {
        return (
            <Form.Item
                label={title}
                name={dataIndex}
                rules={[{ required: rules, message: `必须选择${title}!` }]}
            >
                <TreeSelect
                    treeLine
                    allowClear
                    showSearch
                    treeDefaultExpandAll
                    style={{ width: '100%' }}
                    placeholder={`请选择${title}`}
                    treeData={fieldProps.options}
                    fieldNames={fieldProps.fieldNames}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                />
            </Form.Item>
        )
    }

    const IconFrom = () => {
        const [IconSelect, setIconSelect] = useState(form.getFieldValue(dataIndex))
        useEffect(() => form.setFieldsValue({ [dataIndex]: IconSelect }), [IconSelect])
        return (
            <Form.Item
                className="FormAll"
                label={title}
                name={dataIndex}
                rules={[{ required: rules, message: `必须选择${title}!` }]}
            >
                <div className="SelectIcon">
                    {Object.keys(iconList).map(item => (
                        <div key={item} className={IconSelect === item ? 'active' : ''} onClick={() => setIconSelect(item)}>
                            {ICON(item)}
                        </div>
                    ))}
                </div>
            </Form.Item>
        )
    }

    const DefaultForm = () => {
        return (
            <Form.Item
                label={title}
                name={dataIndex}
                tooltip="未知类型组件,请与开发者或管理员确认"
                rules={[{ required: rules, message: `必须填写${title}!` }]}
            >
                <div>{valueType}</div>
            </Form.Item>
        )
    }

    const FormItemList = {
        hidden: HiddenForm,
        input: InputForm,
        number: NumberForm,
        select: SelectForm,
        date: DateForm,
        textarea: TextAreaFrom,
        treeSelect: TreeSelectForm,
        icon: IconFrom
    }

    const Template = FormItemList[valueType] || DefaultForm
    return (
        <>
            {valueJudge ?
                <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues[valueJudge] !== currentValues[valueJudge]}>
                    {({ getFieldValue }) => getFieldValue(valueJudge) === judgeValue ? <Template /> : null}
                </Form.Item> : <Template />
            }
        </>
    )
}

// 通用Color参数
export const ColorPickerTemp = ({ item, data }) => {
    ColorPickerTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid } = item

    return (
        <div className='Label'>
            <div>{label} : </div>
            <ColorPicker
                showText
                defaultValue={data[uuid][name]}
                onChangeComplete={e => data[uuid][name] = e.toHexString()}
                presets={ColorSelect}
            />
        </div>
    )
}

// 混合颜色
export const MixColorTemp = ({ item, data, FormEvent }) => {
    MixColorTemp.propTypes = { data: PropTypes.object, item: PropTypes.object, FormEvent: PropTypes.object, }
    const { label, name, uuid, color } = item
    const theme = sessionStorage.getItem('theme')
    const params =
        data[uuid][name][color] ?
            data[uuid][name][color].match(/\((.*?)\)/)[1] :
            `linear-gradient(0deg, ${theme}, ${theme})`.match(/\((.*?)\)/)[1]
    const [a, b, c] = params.split(',')
    const [deg, setDeg] = useState(Number(a) || 0)
    const [colorA, setColorA] = useState(b)
    const [colorB, setColorB] = useState(c)

    return (
        <div className='Label'>
            <div>{label} : </div>
            <div className='MixColorTemp'>
                <InputNumber
                    min={-360}
                    max={360}
                    defaultValue={Number(deg) || 0}
                    onChange={e => {
                        setDeg(e || 0)
                        data[uuid][name] = `linear-gradient(${e || 0}deg,${colorA},${colorB})`
                        FormEvent.emit(`linear-gradient(${e || 0}deg,${colorA},${colorB})`)
                    }}
                />
                <ColorPicker
                    showText
                    defaultValue={colorA}
                    onChangeComplete={e => {
                        setColorA(e.toHexString())
                        data[uuid][name] = `linear-gradient(${deg}deg,${e.toHexString()},${colorB})`
                        FormEvent.emit(`linear-gradient(${deg}deg,${e.toHexString()},${colorB})`)
                    }}
                    presets={ColorSelect}
                />
                <ColorPicker
                    showText
                    defaultValue={colorB}
                    onChangeComplete={e => {
                        setColorB(e.toHexString())
                        data[uuid][name] = `linear-gradient(${deg}deg,${colorA},${e.toHexString()})`
                        FormEvent.emit(`linear-gradient(${deg}deg,${colorA},${e.toHexString()})`)
                    }}
                    presets={ColorSelect}
                />
            </div>
        </div>
    )
}

// 通用Input参数
export const InputTemp = ({ item, data }) => {
    InputTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid } = item
    return (
        <div className='Label'>
            <div>{label} : </div>
            <Input
                defaultValue={data[uuid][name]}
                onChange={e => data[uuid][name] = e.target.value}
            />
        </div>
    )
}
// 通用TextArea
export const TextAreaTemp = ({ item, data }) => {
    TextAreaTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid } = item
    return (
        <div className='Label'>
            <div>{label} : </div>
            <TextArea
                rows={4}
                defaultValue={data[uuid][name]}
                onChange={e => data[uuid][name] = e.target.value}
            />
        </div>
    )

}

// 通用inputNumber参数
export const InputNumberTemp = ({ item, data }) => {
    InputNumberTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid, addonAfter } = item

    return (
        <div className='Label'>
            <div>{label} : </div>
            <InputNumber
                addonAfter={addonAfter}
                defaultValue={data[uuid][name]}
                onChange={e => data[uuid][name] = e}
            />
        </div>
    )
}

// 通用Radio参数
export const RadioTemp = ({ item, data }) => {
    RadioTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid, options } = item
    return (
        <div className='Label'>
            <div>{label} : </div>
            <Radio.Group
                options={options}
                optionType="button"
                buttonStyle="solid"
                defaultValue={data[uuid][name]}
                onChange={e => data[uuid][name] = e.target.value}
            />
        </div>
    )
}

// 通用Select单选
export const SelectTemp = ({ item, data }) => {
    SelectTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid, options } = item
    return (
        <div className='Label'>
            <div>{label} : </div>
            <Select
                showSearch
                options={options}
                defaultValue={data[uuid][name]}
                onChange={e => data[uuid][name] = e}

            />
        </div>
    )
}

// 通用Select多选
export const SelectMultipleTemp = ({ item, data }) => {
    SelectMultipleTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid, options } = item
    return (
        <div className='Label'>
            <div>{label} : </div>
            <Select
                mode="multiple"
                options={options}
                defaultValue={data[uuid][name]}
                onChange={e => data[uuid][name] = e}
            />
        </div>
    )
}
// 通用tree多选
export const TreeSelectTemp = ({ item, data }) => {
    TreeSelectTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid, options } = item
    return (
        <div className='Label'>
            <div>{label} : </div>
            <TreeSelect
                showSearch
                allowClear
                defaultValue={data[uuid][name]}
                placeholder="请选择"
                treeDefaultExpandAll
                treeData={options}
                onChange={e => data[uuid][name] = e}
            />
        </div>
    )
}
// 通用tree多选
export const TreeMultipleTemp = ({ item, data }) => {
    TreeMultipleTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid, options } = item
    return (
        <div className='Label'>
            <div>{label} : </div>
            <TreeSelect
                showSearch
                allowClear
                multiple
                defaultValue={data[uuid][name]}
                placeholder="请选择"
                treeDefaultExpandAll
                treeData={options}
                onChange={e => data[uuid][name] = e}
            />
        </div>
    )
}

// 通用Slider

export const SliderTemp = ({ item, data }) => {
    SliderTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid, options } = item
    const { min, max, step } = options
    return (
        <div className='Label'>
            <div>{label} : </div>
            <Slider
                min={min}
                max={max}
                step={step || min || 1}
                defaultValue={data[uuid][name]}
                onChange={e => data[uuid][name] = e}
            />
        </div>
    )
}

// ! 自定义操作
// 后台样式选择
export const ThemeBox = ({ item, data }) => {
    ThemeBox.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, uuid } = item

    const HomeType = {
        A01: ModelHomeA01,
        A02: ModelHomeA02
    }

    const [Data, setData] = useState(data[uuid][name])
    const [OptionsCall, setOptionsCall] = useState()

    const onClick = () => {
        setOptionsCall({
            type: 'ThemeSelect',
            title: '主题设置',
            data: data[uuid][name]
        })
    }

    const ModalEvent = useEventEmitter()
    ModalEvent.useSubscription(val => {
        data[uuid][name] = val
        setData(val)
    })

    return (
        <div className='Label'>
            <div>{label} : </div>
            <div className='ThemeBox' onClick={onClick} >
                {(() => {
                    const Template = HomeType[Data]
                    return <Template />
                })()}
            </div>
            <ModelBox OptionsCall={OptionsCall} ModalEvent={ModalEvent} />
        </div>
    )
}

// 主题背景样式
export const TheneBack = ({ item, data }) => {
    TheneBack.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { label, name, params, uuid } = item

    const [backType, setBackType] = useState(data[uuid][name])
    const [backData, setbackData] = useState(data[uuid][params])

    const onClick = () => {
        setOptionsCall({ type: 'TheneBackSelect', title: '主题设置', data: { active: { backType, backData }, theme: data } })
    }

    const [OptionsCall, setOptionsCall] = useState()
    const ModalEvent = useEventEmitter()
    ModalEvent.useSubscription(val => {
        const { backType, backData } = val
        data[uuid][name] = backType
        data[uuid][params] = backData
        setBackType(backType)
        setbackData(backData)
    })

    const Back = () => {
        const backTypes = {
            image: (src) => <img className='ImageBack' src={src} alt="" />,
            color: (color) => <div className='ColorBack' style={{ '--Back': color }} />,
            patter: (data) => {
                const [name, ...A] = data.split(',')
                const style = Object.fromEntries(A.map((value, index) => [`--A0${index + 1}`, value]))
                return (<div className={`PatterBack ${name}`} style={style} />)
            }
        }
        return (
            <div className='Back'>
                {backTypes[backType]?.(backType === 'image' ? ThemeBackList[backData] : backData)}
            </div>
        )
    }


    return (
        <div className='Label'>
            <div>{label} : </div>
            <div className='TheneBack' onClick={onClick} >
                <div className='Box_Shadow__A01'>
                    <Back />
                </div>
            </div>
            <ModelBox OptionsCall={OptionsCall} ModalEvent={ModalEvent} />
        </div>
    )
}

// 场景特效
export const EffectTemp = ({ item, data }) => {
    EffectTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { uuid, label, name, options } = item

    const [Status, setStatus] = useState(data[uuid][name])
    const { list } = EffectList[name]
    return (
        <>
            <div className='Label'>
                <div>{label} : </div>
                <Radio.Group
                    options={options}
                    optionType="button"
                    buttonStyle="solid"
                    defaultValue={data[uuid][name]}
                    onChange={e => {
                        data[uuid][name] = e.target.value
                        setStatus(e.target.value)
                    }}
                />
            </div>
            {Status && list &&
                <div>{UseConfigSection(data, list)}</div>
            }
        </>
    )
}

// 元素特效
export const MaterialType = ({ item, data }) => {
    MaterialType.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { uuid, label } = item
    const [TypeSelect, setTypeSelect] = useState(data[uuid].materialType)
    const [Type, setType] = useState(MaterialTyp.find(v => v.value === data[uuid].materialType).attribute)
    const [Data, setData] = useState(data[uuid])

    return (
        <>
            <div className='Label'>
                <div>{label} : </div>
                <Select
                    options={MaterialTyp}
                    defaultValue={TypeSelect}
                    onChange={e => {
                        const { attribute, defaultData } = MaterialTyp.find(v => v.value === e)
                        data[uuid].materialType = e
                        data[uuid].materialOptions = defaultData
                        setTypeSelect(e)
                        setType(attribute)
                        setData(data[uuid])
                    }}
                />
            </div>
            <div className='Details'>
                {Data && Type && UseConfigSection(Data, Type)}
            </div>
        </>
    )
}
const OutLineTemp = ({ item, data }) => {
    OutLineTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { uuid, label, options } = item
    return (
        <Collapse
            className='BlockBack'
            items={[
                {
                    key: 1,
                    label,
                    children: (
                        <>
                            <div className='Label'>
                                <div>是否衬色 : </div>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].outline}
                                    onChange={e => data[uuid].outline = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>衬色颜色 : </div>
                                <ColorPicker
                                    showText
                                    defaultValue={data[uuid].outlineColor}
                                    onChangeComplete={e => data[uuid].outlineColor = e.toHexString()}
                                    presets={ColorSelect}
                                />
                            </div>
                            <div className='Label'>
                                <div>衬色透明 : </div>
                                <Slider
                                    min={0}
                                    max={1}
                                    step={0.1 || 0 || 1}
                                    defaultValue={data[uuid].outlineOpacity}
                                    onChange={e => data[uuid].outlineOpacity = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>衬色线宽 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].outlineWidth}
                                    onChange={e => data[uuid].outlineWidth = e}
                                />
                            </div>
                        </>
                    ),
                },
            ]}
        />
    )
}

const BackTemp = ({ item, data }) => {
    BackTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { uuid, label, options } = item
    return (
        <Collapse
            className='BlockBack'
            items={[
                {
                    key: 1,
                    label,
                    children: (
                        <>
                            <div className='Label'>
                                <div>是否背景 : </div>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].background}
                                    onChange={e => data[uuid].background = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>衬色颜色 : </div>
                                <ColorPicker
                                    showText
                                    defaultValue={data[uuid].backgroundColor}
                                    onChangeComplete={e => data[uuid].backgroundColor = e.toHexString()}
                                    presets={ColorSelect}
                                />
                            </div>

                            <div className='Label'>
                                <div>背景透明 : </div>
                                <Slider
                                    min={0}
                                    max={1}
                                    step={0.1 || 0 || 1}
                                    defaultValue={data[uuid].backgroundOpacity}
                                    onChange={e => data[uuid].backgroundOpacity = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>背景填充 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].backgroundPadding}
                                    onChange={e => data[uuid].backgroundPadding = e}
                                />
                            </div>
                        </>
                    ),
                },
            ]}
        />
    )
}

const HasTemp = ({ item, data }) => {
    HasTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { uuid, label, options } = item
    return (
        <Collapse
            className='BlockBack'
            items={[
                {
                    key: 1,
                    label,
                    children: (
                        <>
                            <div className='Label'>
                                <div>是否偏移 : </div>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].hasPixelOffset}
                                    onChange={e => data[uuid].hasPixelOffset = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>X轴偏移 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].pixelOffsetX}
                                    onChange={e => data[uuid].pixelOffsetX = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>Y轴偏移 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].pixelOffsetY}
                                    onChange={e => data[uuid].pixelOffsetY = e}
                                />
                            </div>
                        </>
                    ),
                },
            ]}
        />
    )
}

const ScaleTemp = ({ item, data }) => {
    ScaleTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { uuid, label, options } = item
    return (
        <Collapse
            className='BlockBack'
            items={[
                {
                    key: 1,
                    label,
                    children: (
                        <>
                            <div className='Label'>
                                <div>视距缩放 : </div>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].scaleByDistance}
                                    onChange={e => data[uuid].scaleByDistance = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>上限距离 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].scaleByDistance_far}
                                    onChange={e => data[uuid].scaleByDistance_far = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>上限比例 : </div>
                                <Slider
                                    min={0}
                                    max={1}
                                    step={0.1 || 0 || 1}
                                    defaultValue={data[uuid].scaleByDistance_farValue}
                                    onChange={e => data[uuid].scaleByDistance_farValue = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>下限距离 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].scaleByDistance_near}
                                    onChange={e => data[uuid].scaleByDistance_near = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>下限比例 : </div>
                                <Slider
                                    min={0}
                                    max={1}
                                    step={0.1 || 0 || 1}
                                    defaultValue={data[uuid].scaleByDistance_nearValue}
                                    onChange={e => data[uuid].scaleByDistance_nearValue = e}
                                />
                            </div>
                        </>
                    ),
                },
            ]}
        />
    )
}

const DisTemp = ({ item, data }) => {
    DisTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { uuid, label, options } = item
    return (
        <Collapse
            className='BlockBack'
            items={[
                {
                    key: 1,
                    label,
                    children: (
                        <>
                            <div className='Label'>
                                <div>视距显示 : </div>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].distanceDisplayCondition}
                                    onChange={e => data[uuid].distanceDisplayCondition = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>最大距离 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].distanceDisplayCondition_far}
                                    onChange={e => data[uuid].distanceDisplayCondition_far = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>最下距离 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].distanceDisplayCondition_near}
                                    onChange={e => data[uuid].distanceDisplayCondition_near = e}
                                />
                            </div>
                        </>
                    ),
                },
            ]}
        />
    )
}

const LabelTemp = ({ item, data }) => {
    LabelTemp.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { uuid, options } = item
    return (
        <Collapse
            className='BlockBack'
            items={[
                {
                    key: 0,
                    label: '文字-基础',
                    children: (
                        <>
                            <div className='Label'>
                                <div>文字内容 : </div>
                                <Input
                                    defaultValue={data[uuid].label.text}
                                    onChange={e => data[uuid].label.text = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>缩放比例 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].label.scale}
                                    onChange={e => data[uuid].label.scale = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>文本字体 : </div>
                                <Select
                                    options={optionsList.fontFamily}
                                    defaultValue={data[uuid].label.font_family}
                                    onChange={e => data[uuid].label.font_family = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>文本字号 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].label.font_size}
                                    onChange={e => data[uuid].label.font_size = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>文本加粗 : </div>
                                <Select
                                    options={optionsList.fontWeight}
                                    defaultValue={data[uuid].label.font_weight}
                                    onChange={e => data[uuid].label.font_weight = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>文本倾斜 : </div>
                                <Select
                                    options={optionsList.fontStyle}
                                    defaultValue={data[uuid].label.font_style}
                                    onChange={e => data[uuid].label.font_style = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>是否填充 : </div>
                                <Radio.Group
                                    options={optionsList.isYeas}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].label.fill}
                                    onChange={e => data[uuid].label.fill = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>文本颜色 : </div>
                                <ColorPicker
                                    showText
                                    defaultValue={data[uuid].label.color}
                                    onChangeComplete={e => data[uuid].label.color = e.toHexString()}
                                    presets={ColorSelect}
                                />
                            </div>
                            <div className='Label'>
                                <div>整体透明 : </div>
                                <Slider
                                    min={0}
                                    max={1}
                                    step={0.1}
                                    defaultValue={data[uuid].label.opacity}
                                    onChange={e => data[uuid].label.opacity = e}
                                />

                            </div>
                            <div className='Label'>
                                <div>是否遮挡 : </div>
                                <Radio.Group
                                    options={optionsList.isYeas}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].label.visibleDepth}
                                    onChange={e => data[uuid].label.visibleDepth = e.target.value}
                                />
                            </div>
                        </>
                    )
                },
                {
                    key: 1,
                    label: '文字-衬色',
                    children: (
                        <>
                            <div className='Label'>
                                <div>是否衬色 : </div>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].label.outline}
                                    onChange={e => data[uuid].label.outline = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>衬色颜色 : </div>
                                <ColorPicker
                                    showText
                                    defaultValue={data[uuid].label.outlineColor}
                                    onChangeComplete={e => data[uuid].label.outlineColor = e.toHexString()}
                                    presets={ColorSelect}
                                />
                            </div>
                            <div className='Label'>
                                <div>衬色透明 : </div>
                                <Slider
                                    min={0}
                                    max={1}
                                    step={0.1 || 0 || 1}
                                    defaultValue={data[uuid].label.outlineOpacity}
                                    onChange={e => data[uuid].label.outlineOpacity = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>衬色线宽 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].label.outlineWidth}
                                    onChange={e => data[uuid].label.outlineWidth = e}
                                />
                            </div>
                        </>
                    ),
                },
                {
                    key: 2,
                    label: '文字-背景',
                    children: (
                        <>
                            <div className='Label'>
                                <div>是否背景 : </div>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].label.background}
                                    onChange={e => data[uuid].label.background = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>衬色颜色 : </div>
                                <ColorPicker
                                    showText
                                    defaultValue={data[uuid].label.backgroundColor}
                                    onChangeComplete={e => data[uuid].label.backgroundColor = e.toHexString()}
                                    presets={ColorSelect}
                                />
                            </div>

                            <div className='Label'>
                                <div>背景透明 : </div>
                                <Slider
                                    min={0}
                                    max={1}
                                    step={0.1 || 0 || 1}
                                    defaultValue={data[uuid].label.backgroundOpacity}
                                    onChange={e => data[uuid].label.backgroundOpacity = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>背景填充 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].label.backgroundPadding}
                                    onChange={e => data[uuid].label.backgroundPadding = e}
                                />
                            </div>
                        </>
                    ),
                },
                {
                    key: 3,
                    label: '文字-偏移',
                    children: (
                        <>
                            <div className='Label'>
                                <div>是否偏移 : </div>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].label.hasPixelOffset}
                                    onChange={e => data[uuid].label.hasPixelOffset = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>X轴偏移 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].label.pixelOffsetX}
                                    onChange={e => data[uuid].label.pixelOffsetX = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>Y轴偏移 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].label.pixelOffsetY}
                                    onChange={e => data[uuid].label.pixelOffsetY = e}
                                />
                            </div>
                        </>
                    ),
                },
                {
                    key: 4,
                    label: '文字-视距缩放',
                    children: (
                        <>
                            <div className='Label'>
                                <div>视距缩放 : </div>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].label.scaleByDistance}
                                    onChange={e => data[uuid].label.scaleByDistance = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>上限距离 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].label.scaleByDistance_far}
                                    onChange={e => data[uuid].label.scaleByDistance_far = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>上限比例 : </div>
                                <Slider
                                    min={0}
                                    max={1}
                                    step={0.1 || 0 || 1}
                                    defaultValue={data[uuid].label.scaleByDistance_farValue}
                                    onChange={e => data[uuid].label.scaleByDistance_farValue = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>下限距离 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].label.scaleByDistance_near}
                                    onChange={e => data[uuid].label.scaleByDistance_near = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>下限比例 : </div>
                                <Slider
                                    min={0}
                                    max={1}
                                    step={0.1 || 0 || 1}
                                    defaultValue={data[uuid].label.scaleByDistance_nearValue}
                                    onChange={e => data[uuid].label.scaleByDistance_nearValue = e}
                                />
                            </div>
                        </>
                    ),
                },
                {
                    key: 5,
                    label: '文字-视距显示',
                    children: (
                        <>
                            <div className='Label'>
                                <div>视距显示 : </div>
                                <Radio.Group
                                    options={options}
                                    optionType="button"
                                    buttonStyle="solid"
                                    defaultValue={data[uuid].label.distanceDisplayCondition}
                                    onChange={e => data[uuid].label.distanceDisplayCondition = e.target.value}
                                />
                            </div>
                            <div className='Label'>
                                <div>最大距离 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].label.distanceDisplayCondition_far}
                                    onChange={e => data[uuid].label.distanceDisplayCondition_far = e}
                                />
                            </div>
                            <div className='Label'>
                                <div>最下距离 : </div>
                                <InputNumber
                                    defaultValue={data[uuid].label.distanceDisplayCondition_near}
                                    onChange={e => data[uuid].label.distanceDisplayCondition_near = e}
                                />
                            </div>
                        </>
                    ),
                },
            ]}
        />
    )
}

const TilesPositon = ({ item, data }) => {
    TilesPositon.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { uuid, name } = item
    return (
        <>
            <div className='Label'>
                <div>经度: </div>
                <InputNumber
                    defaultValue={data[uuid][name].lng}
                    onChange={e => data[uuid][name].lng = e}
                />
            </div>
            <div className='Label'>
                <div>纬度 : </div>
                <InputNumber
                    defaultValue={data[uuid][name].lat}
                    onChange={e => data[uuid][name].lat = e}
                />
            </div>
            <div className='Label'>
                <div>高程 : </div>
                <InputNumber
                    defaultValue={data[uuid][name].alt}
                    onChange={e => data[uuid][name].alt = e}
                />
            </div>
        </>
    )
}

const TilesRotation = ({ item, data }) => {
    TilesRotation.propTypes = { data: PropTypes.object, item: PropTypes.object }
    const { uuid, name } = item
    const min = 0
    const max = 360
    const step = 1
    return (
        <>
            <div className='Label'>
                <div>X轴: </div>
                <Slider
                    min={min}
                    max={max}
                    step={step}
                    defaultValue={data[uuid][name].x}
                    onChange={e => data[uuid][name].x = e}
                />
            </div>
            <div className='Label'>
                <div>Y轴 : </div>
                <Slider
                    min={min}
                    max={max}
                    step={step}
                    defaultValue={data[uuid][name].y}
                    onChange={e => data[uuid][name].y = e}
                />
            </div>
            <div className='Label'>
                <div>Z轴 : </div>
                <Slider
                    min={min}
                    max={max}
                    step={step}
                    defaultValue={data[uuid][name].z}
                    onChange={e => data[uuid][name].z = e}
                />
            </div>
        </>
    )
}


// use模板映射 
const formMapping = {
    ColorPickerTemp,
    MixColorTemp,
    InputTemp,
    TextAreaTemp,
    InputNumberTemp,
    RadioTemp,
    SelectTemp,
    SelectMultipleTemp,
    TreeSelectTemp,
    TreeMultipleTemp,
    SliderTemp,
    // 自定义模板
    ThemeBox,
    TheneBack,
    EffectTemp,
    MaterialType,
    OutLineTemp,
    BackTemp,
    HasTemp,
    ScaleTemp,
    DisTemp,
    LabelTemp,
    TilesPositon,
    TilesRotation
}

// 通用hooks
export const UseConfigSection = (data, list) => {
    return (
        <div className='CommonForm'>
            {list.map(item => {
                const Template = formMapping[item.type]
                return <Template key={item.key} item={item} data={data} />
            })}
        </div>
    )
}